<template>
	<div class="login-layout light-login root">
		<div class="main-container login-center">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container ">
<!-- 							<div class="center">
								<h1>
									<i class="ace-icon fa fa-leaf green"></i>
									<span class="" id="id-text10">课程管理</span>
								</h1>
							</div> -->

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												请输入用户名密码
											</h4>

											<div class="space-6"></div>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" v-model="user.username" class="form-control" placeholder="用户名" />
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" v-model="user.password" class="form-control" placeholder="密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>
													
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<div class="input-group">
																<input v-model="user.imageCode" class="form-control" placeholder="验证码" aria-describedby="basic-addon2">
																<span class="input-group-addon" id="basic-addon2">
																	<img id="imageCode" @click="loadImageCode()" />
																</span>
															</div>
														</span>
													</label>


													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input type="checkbox" class="ace" v-model="remeber"/>
															<span class="lbl">记住我</span>
														</label>

														<button @click="login" type="button" class="width-35 pull-right btn btn-sm btn-primary">
															<i class="ace-icon fa fa-key"></i>
															<span class="bigger-110">登录</span>
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>

										</div><!-- /.widget-main -->
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->

							</div><!-- /.position-relative -->

						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				encryUser: {},
				remeber: true
			}
		},
		mounted() {
			this.user = this.$global.local.getUser()
			this.loadImageCode()
		},
		methods: {
			login() {
				if(this.$global.validator.require(this.user.username, '用户名'))
				if(this.$global.validator.require(this.user.password, '密码'))
				if(this.$global.validator.require(this.user.imageCode, '密码'))
				
				this.encryUser = $.extend({}, this.user)
				this.encryUser.password = this.$global.format.encryPassword(this.user.password)
				console.log(this.encryUser)
				
				let url = process.env.VUE_APP_SERVER + 'system/admin/user/login'
				
				this.$axios.post(url, this.encryUser)
					.then(res => {
						let data = res.data
						if(data.status == 1) { // 登录成功
							this.$toast('登录成功', this.$global.toast.success)
							this.$global.session.setUser(data.data)
							this.$router.push('/')
							if(this.remeber) this.$global.local.setUser(this.user)
							else this.$global.local.setUser(null)
						}else {	// 登录失败
							this.$toast(data.msg, this.$global.toast.fail)
						}
					})
				
			},
			loadImageCode() {
				let imageCodeToken = this.$global.constant.IMAGE_CODE + this.$global.tool.uuid(8)
				this.user.imageCodeToken = imageCodeToken
				let url = process.env.VUE_APP_SERVER + 'system/admin/kaptcha/imageCode/' + imageCodeToken
				$('#imageCode').attr('src', url)
			}
		}
	}
</script>

<style scoped>
	.root {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

	}
	.login-center {
		margin-top: 10%;
	}
	.input-group-addon {
		padding: 0;
	}
	
</style>
